<template>
  <div>
    <el-card>
      <!-- <el-button @click="aaa">
        111
      </el-button> -->
      <el-form :inline="true" class="range_from" ref="form3" :model="form">
        <el-form-item label="筛选类型">
          <el-select v-model="form.type" placeholder="请选择" @change="changeSelect" prop="type">
            <el-option v-for="(item, index) in selectype" :key="index" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="筛选值">
          <el-select v-model="form.value" placeholder="请选择" prop="value">
            <el-option v-for="(item, index) in typeOptions" :key="index" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="searchRange">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="resetRange('form3')">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 增加靶场 -->
      <el-button type="success" @click="addRanges" style="float: right"
        icon="el-icon-circle-plus-outline">增加靶场</el-button>
      <el-dialog title="增加靶场" :visible.sync="addDialogVisible" width="46.875vw">
        <el-form label-width="4.167vw" ref="form1" :model="addRangeItem">
          <el-form-item label="靶场名称:" label-width="6.2083vw" prop="rangeName">
            <el-input v-model="addRangeItem.rangeName" placeholder="请输入靶场名称"></el-input>
          </el-form-item>

          <el-form-item label="靶场上传时间:" label-width="6.2083vw" prop="rangeDate">
            <el-input v-model="addRangeItem.rangeDate" placeholder="请输入靶场上传时间" type="date"></el-input>
          </el-form-item>

          <el-form-item label="靶场价格:" label-width="6.2083vw" prop="rangePrice">
            <el-input v-model="addRangeItem.rangePrice" placeholder="请输入靶场价格"></el-input>
          </el-form-item>

          <el-form-item label="靶场简介:" label-width="6.2083vw" prop="rangeJianjie">
            <el-input v-model="addRangeItem.rangeJianjie" placeholder="请输入靶场简介"></el-input>
          </el-form-item>

          <el-form-item label="靶场上传者:" label-width="6.2083vw">
            <el-input v-model="usercalled" placeholder="请输入靶场上传者" disabled></el-input>
          </el-form-item>
          <!-- 本地存储 -->
          <el-form-item label="靶场类型:" label-width="6.2083vw" prop="typeId">
            <el-select style="float: left" v-model="addRangeItem.typeId">
              <el-option value="1" label="靶场演习"></el-option>
              <el-option value="2" label="在线CTF"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="攻击类型:" label-width="6.2083vw" prop="beiyong3">
            <el-select style="float: left" v-model="addRangeItem.beiyong3">
              <el-option :value="item.id" :label="item.name" v-for="item in attackdata" :key="item.id"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="靶场难度：" label-width="6.2083vw" prop="rdId">
            <el-select style="float: left" v-model="addRangeItem.rdId">
              <el-option value="3" label="困难">困难</el-option>
              <el-option value="2" label="中等">中等</el-option>
              <el-option value="1" label="简单">简单</el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="靶场vip：" label-width="6.2083vw" prop="rangeVip">
            <el-select style="float: left" v-model="addRangeItem.rangeVip">
              <el-option value="0" label="普通">普通</el-option>
              <el-option value="1" label="vip">vip</el-option>
            </el-select>
          </el-form-item>
          <!-- 上传靶场***************************************** -->
          <el-form-item label="靶场路径：" label-width="6.2083vw" prop="rangeUrl">
            <el-upload class="upload-demo" ref="upload" action="http://172.16.13.212:8090/uploadRange"
              :before-upload="beforefileUpload" :limit="1" :on-exceed="handleExceed" :on-success="fileSuccess">
              <el-button size="small" type="primary">点击上传靶场</el-button>
            </el-upload>
          </el-form-item>
          <!-- 172.16.13.212 -->
          <!-- 上传图片***************************************** -->
          <!-- 172.16.10.213 -->
          <el-form-item label="靶场图片:" label-width="6.2083vw" prop="rangeImg">
            <el-upload style="float: left" class="avatar-uploader" ref="upload" action="http://172.16.13.212:8090/uploadoss"
              :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :limit="1"
              :on-exceed="handleExceed">
              <img v-if="addRangeItem.rangeImg" :src="addRangeItem.rangeImg" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel('form1')">取消</el-button>
          <el-button type="primary" @click="addRangenApi('form1')">确定</el-button>
        </span>
      </el-dialog>
      <!-- 表格区域 -->
      <el-table :data="list" stripe border>
        <el-table-column prop="rangeName" label="名称" align="center" width="200px"></el-table-column>

        <el-table-column prop="rangeDate" label="上传靶场日期" align="center">
          <template slot-scope="scope">
            <span>
              {{ (scope.row.rangeDate).slice(0, 10) }}
              {{ (scope.row.rangeDate).slice(11, 16) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="上传者" align="center"></el-table-column>
        <el-table-column prop="rangeState" label="靶场状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.rangeState === 1">在线</span>
            <span v-if="scope.row.rangeState === 2">下架</span>
            <span v-if="scope.row.rangeState === 0">待审核</span>
          </template>
        </el-table-column>
        <el-table-column prop="rdId" label="靶场难度" align="center" width="109.375vw">
          <template slot-scope="scope">
            <span v-if="scope.row.rdId === 3">困难</span>
            <span v-if="scope.row.rdId === 2">中等</span>
            <span v-if="scope.row.rdId === 1">简单</span>

          </template>
        </el-table-column>
        <el-table-column prop="rangePrice" label="靶场价格" align="center"></el-table-column>
        <el-table-column prop="rangeImg" label="靶场图片" align="center">
          <template slot-scope="scope">
            <el-avatar :size="50" :src="scope.row.rangeImg"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="updateRanges(scope)">编辑</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteRanges(scope)">下架</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
        :page-size="transdata.pageSize" :current-page.sync="transdata.currentPage" :page-sizes="[5, 10, 15, 20]"
        @size-change="changePageSize" @current-change="changeCurrentPage">
      </el-pagination>
    </el-card>
    <!-- 修改的模态框 -->
    <el-dialog title="修改靶场信息" :visible.sync="updateDialogVisible" width="41.667vw">
      <el-form label-width="3.125vw" ref="form2" :model="updateRangeItem">
        <el-form-item label="靶场简介：" label-width="15.625vw" prop="rangeJianjie">
          <el-input v-model="updateRangeItem.rangeJianjie" placeholder="请输入简介"></el-input>
        </el-form-item>
        <el-form-item label="靶场名称：" label-width="15.625vw" prop="rangeName">
          <el-input v-model="updateRangeItem.rangeName" placeholder="请输入靶场名称"></el-input>
        </el-form-item>
        <!-- 上传靶场***************************************** -->
        <el-form-item label="靶场路径：" label-width="15.625vw" prop="rangeUrl">
          <el-upload class="upload-demo" ref="upload" action="http://172.16.13.212:8090/uploadRange" :before-upload="beforefileUpload"
            :limit="1" :on-exceed="handleExceed" :on-success="fileSuccess">
            <el-button size="small" type="primary">点击上传靶场</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="攻击类型:" label-width="15.625vw" prop="beiyong3">
          <el-select style="float: left" v-model="updateRangeItem.beiyong3">
            <el-option :value="item.id" :label="item.name" v-for="item in attackdata" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="靶场难度：" label-width="15.625vw" prop="rdId">
          <el-select style="float: left" v-model="updateRangeItem.rdId">
            <el-option value="1" label="简单"></el-option>
            <el-option value="2" label="中等"></el-option>
            <el-option value="3" label="困难"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="靶场类型：" label-width="15.625vw" prop="userType">
          <el-select style="float: left" v-model="updateRangeItem.userType">
            <el-option value="0" label="靶场演习"></el-option>
            <el-option value="1" label="在线CTF"></el-option>
          </el-select>
        </el-form-item>
        <!-- 上传图片***************************************** -->
        <!-- 172.16.10.213 -->
        <!-- 192.168.0.101 -->
        <el-form-item label="靶场图片：" label-width="15.625vw" prop="rangeImg">
          <el-upload style="float: left" class="avatar-uploader" ref="upload" action="http://172.16.13.212:8090/uploadoss"
            :show-file-list="false" :on-success="AvatarSuccess" :before-upload="beforeAvatarUpload" :limit="1"
            :on-exceed="handleExceed">
            <img v-if="updateRangeItem.rangeImg" :src="updateRangeItem.rangeImg" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel('form2')">取消</el-button>
        <el-button type="primary" @click="updateRangeApi">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import dayjs from "dayjs";
import { createNamespacedHelpers } from "vuex";
const { mapState: mapuserinfostate, mapMutations } = createNamespacedHelpers("userinfo")
const { mapMutations: mapTabsMutations } = createNamespacedHelpers("ran");
const { mapMutations: mapaaa } = createNamespacedHelpers("tags");
export default {
  components: { dayjs },
  data() {
    return {
      transdata: {
        pageSize: 5,
        currentPage: 1
        // 暂时死数据
      },
      list: [],
      total: 0,
      query: {
        pageSize: 10,
        currentPage: 1,
      },
      search: {
        typeId: "",
        rangeState: "",
        currentPage: 1,
        pageSize: 5,
      },
      selectype: [
        "靶场类型",
        "靶场状态"
      ],
      typeId: {
        "靶场类型": ["靶场演习", "在线CTF"],
        "靶场状态": ["在线", "下架", "待审核"]
      },
      typeOptions: [],
      form: {
        type: "",
        value: ""
      },

      addDialogVisible: false,
      updateDialogVisible: false,
      //修改编辑
      updateRangeItem: {
        rangeJianjie: "",
        rangeName: "",
        rangeUrl: "",
        rdId: "",
        typeId: "",
        userId: "",
        rangeImg: '',
        beiyong3: ""
      },
      //增加靶场
      addRangeItem: {
        beiyong1: "",
        rangeName: '',
        rangeDate: '',
        rangeUrl: '',
        rangePrice: "",
        rangeJianjie: '',
        userId: JSON.parse(window.localStorage.getItem('usersinfo')).userId,
        typeId: '',
        rdId: '',
        rangeVip: '',
        rangeImg: '',
        beiyong3: ""
      },
      usercalled: JSON.parse(window.localStorage.getItem('usersinfo')).userName,
      attackdata: [
        { id: 1, name: "扫描类" },
        { id: 2, name: "文件" },
        { id: 3, name: "3DQL注入" },
        { id: 4, name: "XSS" },
        { id: 5, name: "CSRF" },
        { id: 6, name: "SSRF" },
        { id: 7, name: "代码文件" },
        { id: 8, name: "命令执行" },
        { id: 9, name: "上传文件" }
      ]

    }
  },
  methods: {
    // async aaa() {
      // console.log("111",axios.defaults.baseURL);
      // this.letmessageolus()
      // let obj = {
      //   "beiyong": "",
      //   "newsBody": "",
      //   "newsClickcount": 0,
      //   "newsDate": "",
      //   "newsHead": "",
      //   "newsId": 1,
      //   "newsImg": "",
      //   "newsType": "",
      //   "newsUrl": ""
      // }
      // const res = await this.$api.news.updatenews(obj)
      // console.log("res", res);
    // },
    ...mapaaa(["addTabs"]),
    ...mapTabsMutations(["addRan"]),
    ...mapMutations(["letmessageolus"]),
    changeSelect() {
      this.form.value = ''
      for (const k in this.selectype) {
        if (this.form.type === this.selectype[k]) {
          this.typeOptions = this.typeId[this.form.type]
        }
      }

    },

    // 模态框
    async addRanges() {
      this.addDialogVisible = true;
      console.log("loginUser", this.loginUser.userId);
    },
    // 渲染初始页面
    async getRanges() {
      const result = await this.$api.ranges.getRange(this.transdata);
      console.log("===result===", result);
      this.list = result.data.rangeeList;
      this.total = result.data.total;
      console.log("abcdefg", this.list, this.total);
    },
    //搜索靶场
    async searchRange() {
      console.log("输出结果验证", this.form);
      if (this.form.type == "靶场类型") {
        delete this.search["rangeState"];
        switch (this.form.value) {
          case "靶场演习":
            this.search.typeId = 1
            break;
          case "在线CTF":
            this.search.typeId = 2
            break;
        }
      } else if (this.form.type == "靶场状态") {
        delete this.search["typeId"];
        switch (this.form.value) {
          case "在线":
            this.search.rangeState = 1
            break;
          case "下架":
            this.search.rangeState = 2
            break;
          case "待审核":
            this.search.rangeState = 0
            break;
        }
      }
      console.log("查看数据", this.search);
      const result = await this.$api.ranges.selType(this.search);
      console.log("搜索jieguo", result);
      this.list = result.data.rangeeList1;
      this.total = result.data.total;
    },
    // 分页
    changeCurrentPage(args) {
      this.transdata.currentPage = args;
      this.search.currentPage = args
      if (this.search.typeId != 0 || this.search.rangeState != 0) {
        this.searchRange()
      } else {
        this.getRanges();
      }

    },
    changePageSize(args) {
      console.log(args);
      this.transdata.pageSize = args;
      this.search.pageSize = args;
      if (this.search.typeId != 0 || this.search.rangeState != 0) {
        this.searchRange()
      } else {
        this.getRanges();
      }
      // this.getRanges();
    },
    //修改编辑信息
    async updateRanges(args) {
      if (args.row.rangeState == 2) {
        this.$message.error("商品已下架，无法进行修改")
      } else {
        console.log("args", args.row);
        this.updateRangeItem = { ...args.row };
        const rangeId = args.row.rangeId;
        this.updateRangeItem.rdId = ""
        const result = await this.$api.ranges.selOne(rangeId);
        console.log("***result***", result);
        //显示模态框
        this.updateDialogVisible = true;
      }
    },
    //修改编辑之后
    async updateRangeApi() {
      console.log("修改后的数据", this.updateRangeItem);
      const result = await this.$api.ranges.updateRange(this.updateRangeItem);
      console.log("---results---", result);
      if (result.code) {
        this.$message.success(result.message);
        this.getRanges();
        //模态框关闭
        this.updateDialogVisible = false;
      }
    },
    //修改头像
    handlesAvatarSuccess(args) {
      console.log("args", args);
      // this.image = `http://172.16.13.162:8090/${args.data[0]}`;
      this.updateRangeItem.rangeImg = args.message;
    },

    //上传修改头像之后
    //增加靶场
    async addRangenApi(form) {
      const result = await this.$api.ranges.addRange(this.addRangeItem);
      console.log("9999**", result);
      if (result.code == 200) {
        this.letmessageolus()
        this.$message.success(result.message);
        //将表单中的数据清空
        this.addRangeItem.rangeName = "";
        this.addRangeItem.rangeDate = "";
        this.addRangeItem.rangeUrl = "";
        this.addRangeItem.rangeJianjie = "";
        this.addRangeItem.rangePrice = "";
        this.addRangeItem.typeId = "";
        this.addRangeItem.rdId = "";
        this.addRangeItem.rangeVip = "";
        // this.addRangeItem.userId=""
        this.addRangeItem.rangeImg = "";
        //模态框关闭
        this.addDialogVisible = false;
        //设置时间方法
        this.addRangeItem.rangeDate = new Date();
        this.addRangeItem.rangeDate = dayjs(this.addRangeItem.rangeDate).format(
          "YYYY/MM/DD"
        );
        this.$refs.upload.clearFiles()
        this.$refs[form].resetFields();
        this.getRanges();
      }
    },
    cancel(form) {
      this.addDialogVisible = false
      this.updateDialogVisible = false
      this.$refs.upload.clearFiles()
      this.$refs[form].resetFields();
    },
    resetRange(form) {
      this.getRanges();

      this.$refs[form].resetFields();
      this.form.value = ""
      this.form.type = ""

    },
    //删除按钮有问题
    async deleteRanges(args) {
      const obj = {
        rangeId: Number(args.row.rangeId),
        rangeState: 2
      }
      if (args.row.rangeState == 2) {
        this.$message.error("商品已下架，无法进行修改")
      } else {
        console.log("userId---", obj);
        const result = await this.$api.ranges.deleteRange(obj);
        console.log("result222", result);
        if (result.code) {
          this.$message.success(result.message);
          //模态框关闭
          this.getRanges();
        }
      }

    },
    //增加靶场图片
    handleAvatarSuccess(args) {
      console.log("args", args);
      this.addRangeItem.rangeImg = args.message;
    },
    //靶场上传
    beforefileUpload(file) {
      console.log("靶场", file);
      // 暂时上传
      this.addRangeItem.rangeUrl = file.name
      this.updateRangeItem.rangeUrl = file.name

      console.log("靶场", this.addRangeItem.rangeUrl);
      const typeArry = ['.war', '.yml'];
      const type = file.name.substring(file.name.lastIndexOf('.'));
      const isImage = typeArry.indexOf(type) > -1;
      if (!isImage) {
        this.$message.error('上传文件必须为war或者yml包');
      }
      return isImage;

    },
    fileSuccess(args) {
      console.log("filsesfils", args);
      this.addRangeItem.rangeUrl = args.name
      this.updateRangeItem.rangeUrl = args.name;

    },
    //限制上传
    handleExceed() {
      this.$message.warning(`当前限制只能选择 1 个文件`);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //修改靶场图片
    AvatarSuccess(args) {
      console.log("args", args);
      this.updateRangeItem.rangeImg = args.message;
    },
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.addTabs(to)
    })
  },
  computed: {
    ...mapuserinfostate(["loginUser"])
  },
  created() {
    this.getRanges();
  },
};
</script>

<style scoped lang="scss">
.avatar-uploader {
  border: 0.052vw dashed #8c939d;
}

.avatar-uploader ::v-deep .el-upload {
  border-radius: 0.313vw;
  cursor: pointer;
  position: relative;
  overflow: hidden;

}

.avatar-uploader ::v-deep .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 1.458vw;
  color: #8c939d;
  width: 9.271vw;
  height: 9.271vw;
  line-height: 9.271vw;
  text-align: center;
}

.avatar {
  width: 9.071vw;
  height: 9.071vw;
  display: block;
}

/* .el-form--inline .el-form-item {
  margin-right: -25.833vw;
} */
</style>